<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-常用指令 v-for</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>普通循环</h1>
    <ul>
        <li v-for="value in arr">{{value}}</li>
    </ul>
    <hr>
    <h1>键值循环</h1>'
    <ul>
        <li v-for="(value ,key) in user">key:{{key}}====value:{{value}}</li>
    </ul>
    <hr>
    <h1>绑定key</h1>
    <ul>
        <!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by -->
        <li v-for="(value, k) in arr" :key="k">{{value}}</li>
    </ul>
    <hr>
    <h1>循环字典集对象</h1>
    <ul>
        <li v-for="(user,index) in users">
            {{index+1}},{{user.id}},{{user.name}},{{user.age}}
        </li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                arr: [12, 4, 5, 34, 2, 100],
                user: {id: 9527, name: '唐伯虎', age: 25},
                arr2: [12, 4, 5, 34, 2, 11, 12],
                users: [
                    {id: 9527, name: '唐伯虎', age: 25},
                    {id: 1001, name: '秋香', age: 22},
                    {id: 1002, name: '石榴姐', age: 24}
                ]
            }
        }
    })
</script>
</body>
</html>